
<template>
  <div class="Main">
    <div class="MainTitle">展示框架数据源列表</div>
    <div class="MianContent">
      <div class="MainTopAction">
        <!-- <div class="flex align-center">
                    <a-button style="margin-right:10px;" icon="plus" type="primary" @click="addBrand">新增数据源</a-button>
                </div>
                <div class="flex align-center">
                    <a-input v-model="keyword" allowClear @change="InputChange" style="width: 300px;" placeholder="请输入信息查询" />
                    <a-button class="ml-10" type="primary" @click="SeachKeyword">搜索</a-button>
                </div> -->
        <div>
          {{ FrameInfo.name }}
          <img
            style="width: 300px; height:200px"
            :src="FrameInfo.logo"
            alt=""
          />
        </div>
        <!-- <a-button
          style="margin-left: 10px"
          icon="plus"
          type="primary"
          @click="addBrand"
          >新增数据源</a-button
        > -->
      </div>
      <div class="TableView">
        <a-table
         :scroll="{ x: 1600, y: '' }"
          :columns="listfields"
          :data-source="listData"
          bordered
          size="middle"
          :pagination="false"
        >
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="action" slot-scope="row, index">
            <!-- <a-button type="primary" size="small" @click="GoOrderDetail(index)">上架</a-button> -->
            <!-- <a-button style="margin:0 10px 0 0;" type="primary" size="small" @click="EditBrand(index)">编辑</a-button> -->
            <a-button
              style="margin: 0 10px 0 0"
              type="primary"
              size="small"
              @click="EditBrand(index)"
              >选择</a-button
            >
            <!-- <a-popconfirm
              placement="bottom"
              ok-text="删除"
              cancel-text="取消"
              @confirm="DeleteItem(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将删除该数据源, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm> -->
            <!-- <a-button style="margin:0 0px 0 10px;" type="info" size="small" @click="BrandStatus(index)">{{index.status?'下架':'上架'}}</a-button> -->
          </div>
          <div slot="datasourceUrl" slot-scope="row, index">
            <div v-if="!index.source">/</div>
            <div v-else>
              <div style="display: flex">
                <h3 style="flex-shrink:0;">m3u8Url：</h3>
                <div style="text-align: left">
                  {{ row.m3u8Url ? row.m3u8Url : "无" }}
                </div>
              </div>
              <div style="display: flex">
                <h3 style="flex-shrink:0;">rtmpUrl：</h3>
                <div style="text-align: left">
                  {{ row.rtmpUrl ? row.rtmpUrl : "无" }}
                </div>
              </div>
              <div style="display: flex">
                <h3 style="flex-shrink:0;">rtspUrl：</h3>
                <div style="text-align: left">
                  {{ row.rtspUrl ? row.rtspUrl : "无" }}
                </div>
              </div>
            </div>
          </div>
          <div slot="status" slot-scope="row, index">
            {{ row == 1 ? "在线" : "离线" }}
          </div>
          <div slot="CreatedAt" slot-scope="row, index">
            {{ !index.source ? "/" : row }}
          </div>
          <div slot="name" slot-scope="row, index">
            {{ !index.source ? "/" : row }}
          </div>
        </a-table>
        <!-- <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
          :pageSizeOptions="['20','30','40','50']"
        ></Pagination> -->
        <div style="width:100%;display:flex;justify-content:flex-end;margin-top:10px;">
          <a-pagination
            v-model="pageno"
            show-size-changer
            :page-size.sync="pagesize"
            :total="total"
            @change="handlePageChange"
            @showSizeChange="onShowSizeChange"
            :show-total="total => `共 ${total} 条`"
          />
        </div>
      </div>
    </div>
    <a-modal
      :title="ModalTitle"
      v-if="visible"
      v-model="visible"
      width="80%"
      :centered="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div style="padding-left: 10px">
        <a-table
         :scroll="{ x: 1600, y: 500 }"
          :columns="SourceListfields"
          :data-source="sourceListData"
          bordered
          size="middle"
          :pagination="false"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            type: 'radio',
          }"
        >
          <!-- :customRow="customRow" 选择行选中--> 


          <!-- <div slot="action" slot-scope="row, index">
            <a-button type="primary" size="small" @click="selectDataSource(index)">选择</a-button>
          </div> -->
          <div slot="datasourceUrl" slot-scope="row, index">
            <div style="display: flex">
              <h3 style="flex-shrink:0;">m3u8Url：</h3>
              <div style="text-align: left">{{ row ? row : "无" }}</div>
            </div>
            <div style="display: flex">
              <h3 style="flex-shrink:0;">rtmpUrl：</h3>
              <div style="text-align: left">
                {{ index.rtmpUrl ? index.rtmpUrl : "无" }}
              </div>
            </div>
            <div style="display: flex">
              <h3 style="flex-shrink:0;">rtspUrl：</h3>
              <div style="text-align: left">
                {{ index.rtspUrl ? index.rtspUrl : "无" }}
              </div>
            </div>
          </div>
          <div slot="status" slot-scope="row, index">
            {{ row == 1 ? "在线" : "离线" }}
          </div>
        </a-table>
        <Pagination
          :total="totalSource"
          v-model="pagenoSource"
          :pageSize.sync="pagesizeSource"
          @change="handlePageChangeSource"
          @onShowSizeChange="onShowSizeChangeSource"
        ></Pagination>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import {
  FrameDataSourceList,
  DataSourceList,
} from "@/views/Columns/FrameManage";
import {
  GetCamLayoutDataList,
  GetDataSoureList,
  CreateCamLayoutData,
  UpdateCamLayoutData,
  DeleteCamLayoutData,
} from "@/api/api.js";
import env from "@/config/env";
import request from "@/utils/request";
import Vue from "vue";

export default {
  name: "list",
  components: {
    Pagination,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 20, //一页显示多少条数据
      keyword: "",
      OrderStatus: "",
      listfields: FrameDataSourceList, //表头列表
      listData: [], //表格数据
      cate: undefined, //进食阶段
      allergy: undefined, //辅食类型

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false,
      ModalTitle: "新增数据源",
      form: {
        name: "",
        status: 1,
        m3u8Url: "",
        rtmpUrl: "",
        rtspUrl: "",
        type: undefined,
      },
      rules: {
        name: [
          { required: true, message: "请输入数据源名称!", trigger: "blur" },
        ],
        m3u8Url: [
          { required: true, message: "请输入m3u8Url!", trigger: "blur" },
        ],
        //   rtmpUrl: [
        //     { required: true, message: "请输入rtmpUrl!", trigger: "blur" },
        //   ],
        //   rtspUrl: [
        //     { required: true, message: "请输入rtspUrl!", trigger: "blur" },
        //   ],
        type: [{ required: true, message: "请选择类型!", trigger: "blur" }],
      },
      brandId: null, //数据源id

      FrameInfo: {}, //展示框架信息

      // 数据源数据表格
      SourceListfields: DataSourceList,
      totalSource: 0, //定义初始有多少条数据
      pagenoSource: 1, //默认第几页
      pagesizeSource: 10, //一页显示多少条数据
      sourceListData: [], //数据源数据列表
      selectedRowKeys: [], //选中的数据源
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {},
  mounted() {
    let that = this;
    that.FrameInfo = {
      id: that.$route.query.id,
      name: that.$route.query.name,
      logo: that.$route.query.logo,
    };
    that.GetList();
  },
  methods: {
    ...mapActions({}),

    // 上下架
    async BrandStatus(row) {
      const that = this;
      let params = {
        id: row.ID,
        status: row.status ? false : true,
      };
      let res = await BrandStatus(params);
      if (res.data.code == 0) {
        showSuccess("操作成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 删除按钮
    async DeleteItem(row) {
      const that = this;
      let res = await DeleteCamLayoutData({ id: row.ID });
      if (res.data.code == 0) {
        showSuccess("删除成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 新增数据源按钮
    addBrand() {
      const that = this;
      that.brandId = null;
      that.ModalTitle = "新增展示框架数据源";
      that.visible = true;
      that.GetListSource();
    },

    // 编辑按钮
    EditBrand(row) {
      const that = this;
      that.brandId = row.ID;
      that.selectedRowKeys = !row.source ? [] : [row.source.ID];
      that.ModalTitle = "选择展示框架数据源";
      that.visible = true;
      that.GetListSource();
    },

    // 弹窗取消关闭
    handleCancel() {
      const that = this;
      that.selectedRowKeys = [];
    },
    // 弹窗确认按钮
    async handleOk() {
      const that = this;
      if (!that.selectedRowKeys.length) {
        showError("请先选择数据源！");
        return;
      }
      let params = {
        // id:Vue.ls.get('USER').id,
        layoutId: that.FrameInfo.id * 1,
        sourceId: that.selectedRowKeys[0],
      };
      let res;
      if (that.brandId) {
        //编辑
        params.input = that.brandId;
        params.id = that.brandId;
        res = await UpdateCamLayoutData(params);
      } else {
        // 新增
        res = await CreateCamLayoutData(params);
      }
      if (res.data.code == 0) {
        showSuccess(that.brandId ? "操作成功" : "添加成功");
        that.visible = false;
        that.handleCancel();

        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    InputChange(e) {
      let that = this;
      if (e.target.value == "") {
        that.GetList();
      }
    },
    SeachKeyword() {
      let that = this;
      that.GetList();
    },
    GoOrderDetail(row) {
      this.$router.push({
        name: "OrderInfo",
        query: { id: row.id, back: "OrderList" },
      });
    },
    // 获取数据列表API
    async GetList() {
      let that = this;
      let params = {
        layoutId: that.FrameInfo.id,
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await GetCamLayoutDataList(params);
      if (res.data.code == 0) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.ID;
            item.indexNum = index;
            item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.total;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    // 获取数据源列表API
    async GetListSource() {
      let that = this;
      let params = {
        // keywords: that.keyword,
        page: that.pagenoSource,
        pageSize: that.pagesizeSource,
      };
      const res = await GetDataSoureList(params);
      if (res.data.code == 0) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.ID;
            item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.totalSource = data.total;
        that.sourceListData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      let that = this;
      that.pageno = pageno;
      that.pagesize = pagesize;
      that.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      let that = this;
      //pagesize 变化的回调
      that.pageno = current;
      that.pagesize = size;
      that.GetList(); //这个是向后台请求的数据函数
    },

    // 数据源列表
    //分页器
    handlePageChangeSource(pageno, pagesize) {
      //点击第几页触发的函数
      let that = this;
      that.pagenoSource = pageno;
      that.pagesizeSource = pagesize;
      that.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChangeSource(current, size) {
      //改变每页显示条目数的函数
      let that = this;
      //pagesize 变化的回调
      that.pagenoSource = current;
      that.pagesizeSource = size;
      that.GetList(); //这个是向后台请求的数据函数
    },

    // 选中行选中单选框
    // customRow(record) {
    //     console.log(record);
    //     const that = this
    //   return {
    //     on: {
    //       // 鼠标单击行
    //       click: (event) => {
    //         if (that.isSingleTable) {
    //           // 单选
    //         //   let keys = [];
    //         //   keys.push(record.ID);
    //           that.selectedRowKeys = [record.ID];
    //         } else {
    //           //多选
    //           let indexRow = that.selectedRowKeys.indexOf(record.ID);
    //           indexRow === -1
    //             ? that.selectedRowKeys.push(record.ID)
    //             : that.selectedRowKeys.splice(indexRow, 1);
    //         }
    //       },
    //     },
    //   };
    // },

    // 列表选中操作
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      console.log(this.selectedRowKeys);
    },
  },
};
</script>

<style lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .TabsItem {
      padding: 10px 0;
      width: 70px;
      position: relative;
      margin-right: 24px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      color: #000;
    }

    .TabsIndex {
      color: #dda955;
    }

    .TabsIndex::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 50px;
      height: 2px;
      background-color: #dda955;
    }
  }
}
</style>